<template>
  <div class="app-container calendar-list-container" v-loading="vLoading" >
    <el-form :model="q" ref="q" label-width="100px" class="el-form filter-container">
      <el-row>
        <el-col :span="8">
          <el-form-item label="起始日期" prop="startDate">
            <el-date-picker v-model="q.startDate" type="date" placeholder="起始日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker v-model="q.endDate" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="业务类型" prop="uBusinessType">
            <el-select v-model="value" placeholder="请选择">
              <el-option :label="xxx" :value="0">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8" class="cx-btnbox">
          <el-button round class="r" type="primary" @click="resrtFrom ">重置</el-button>
          <el-button round class="r" type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list" border fit highlight-current-row style="width: 100%;" class="body-w" :row-class-name="rowClassName">
      <el-table-column label="业务类型" prop="uBusinessTypeName" width="150"></el-table-column>
      <el-table-column label="交易账户/用户" prop="tradingName" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.tradingUserName? (scope.row.tradingUserName+'/'+scope.row.tradingName):'' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变化前" prop="beforeChangedAmount" width="100"></el-table-column>
      <el-table-column label="变化值" prop="changedAmount" width="100"></el-table-column>
      <el-table-column label="变化后" prop="afterChangedAmount" width="100"></el-table-column>
      <el-table-column label="备注" prop="remark" v-if="false" ></el-table-column>
      <el-table-column label="交易时间" prop="creationTime" width="160" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.creationTime | moment}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" style="margin-right:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="q.startPage" :page-sizes="[10,20,30, 50]" :page-size="q.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { GetUserFinancialPageList } from '@/api/user'

export default {
  name: 'userFinancialList',
  components: {
  },
  props: {
    userId: {
      type: Number,
      default: 0
    },
    uBusinessType: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      list: [],
      vLoading: false,
      total: 0,
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 30,
        startDate: '',
        endDate: '',
        userId: 0
      }
    }
  },
  watch: {
    userId: {
      immediate: true,
      handler(newVal) {
        this.q.userId = newVal
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    rowClassName({ row, rowIndex }) {
      if (row.changedAmount >= 0) {
        return 'greenFont'
      } else {
        return 'redFont'
      }
    },
    resrtFrom() {
      this.$refs['q'].resetFields()
    },
    handleSizeChange(val) {
      this.q.pageCount = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.q.startPage = val
      this.getList()
    },
    getList() {
      var _this = this
      _this.vLoading = true
      if (_this.uBusinessType >= 0) {
        _this.q.uBusinessType = _this.uBusinessType
      }
      GetUserFinancialPageList(_this.q).then(result => {
        _this.list = result.data.items
        _this.total = result.data.totalCount
        _this.vLoading = false
      })
    }
  }
}
</script>
